<template>
  <div class="page">
    <div class="user" v-if="false">
      <div class="label">头像</div>
      <div class="flex align-center  user-detail">
        <div class="flex align-center">
          <image class="user-icon" src=""></image>
        </div>
        <div class="edit">编辑</div>
      </div>
    </div>

    <div class="grid">
      <div class="push-item">
        <BInput label="姓名" v-model="userDetail.name" />
      </div>
      <div class="push-item">
        <BInput label="性别" v-model="userDetail.gender" ></BInput>
      </div>
      <div class="push-item">
        <BInput label="年龄" v-model="userDetail.age" ></BInput>
      </div>
      <div class="push-item">
        <BInput label="工作年限" v-model="userDetail.work_ages" ></BInput>
      </div>
    </div>

    <div class="push-item">
      <BInput label="工作岗位" v-model="userDetail.job" ></BInput>
    </div>

    <div class="push-item">
      <BPrices label="薪资范围"  v-model="userDetail.salary"></BPrices>
    </div>

    <div class="two-input">
      <div class="label">个人标签</div>
      <div class="flex align-center input-content" v-for="(item, index) in userDetail?.tags">
        <div class="flex align-center ipt">
          <input placeholder="请输入标签" :value="item" :disabled="true" />
        </div>
        <image class="btn-icon" @click="userDetail?.tags?.splice(index, 1)"></image>
      </div>
      <div class="flex align-center input-content" >
        <div class="flex align-center ipt">
          <input placeholder="请输入标签" v-model="tagsValue" style="width: 100%" />
        </div>
        <image class="btn-icon" @click=" userDetail?.tags.push(tagsValue); tagsValue = '';"></image>
      </div>
    </div>

    <div class="two-input">
      <div class="label">教育经历</div>
      <div class="flex align-center input-content" v-for="item in userDetail?.edu_history">
        <div class="flex align-center ipt">
          <input placeholder="请输入" :value="item.college" :disabled="true" />
          <div class="border"></div>
          <input placeholder="请输入" :value="item.degree" :disabled="true" />
        </div>
        <image class="btn-icon"></image>
      </div>
      <div class="flex align-center input-content" >
        <div class="flex align-center ipt">
          <input placeholder="请输入" v-model="college"/>
          <div class="border"></div>
          <input placeholder="请输入" v-model="degree"/>
        </div>
        <image class="btn-icon" @click=" userDetail?.edu_history.push({college, degree }); degree = ''; college = '';" ></image>
      </div>
    </div>
    <div class="two-input work2" style="height: max-content;">
      <div class="label">工作经历</div>
      <div class="flex align-center input-content" v-for="item in userDetail?.work_history">
        <div class=" ipt">
          <div class="flex align-center ipt-item">
            <input placeholder="公司名" v-model="item.company" />
            <div class="border"></div>
            <input placeholder="职位" v-model="item.position" />
          </div>
          <div class="flex align-center ipt-item">
            <picker  mode="date" :value="item.start_time"  @change="(event) => item.start_time = event.detail.value">
              <view class="uni-input" >{{item.start_time || '入职日期'}}</view>
            </picker>
            <div class="border"></div>
            <picker mode="date"  :value="item.end_time"  @change="(event) => item.end_time = event.detail.value">
              <view class="uni-input">{{item.end_time || '离职日期'}}</view>
            </picker>
          </div>
        </div>
        <image class="btn-icon"></image>
      </div>
      <div class="flex align-center input-content">
        <div class=" ipt">
          <div class="flex align-center ipt-item">
            <input placeholder="公司名" v-model="company" />
            <div class="border"></div>
            <input placeholder="职位" v-model="position" />
          </div>
          <div class="flex align-center ipt-item">
            <picker  mode="date" :value="start_time"  @change="(event) => start_time = event.detail.value">
              <view class="uni-input" >{{start_time || '入职日期'}}</view>
            </picker>
            <div class="border"></div>
            <picker mode="date"  :value="end_time"  @change="(event) => end_time = event.detail.value">
              <view class="uni-input">{{end_time || '离职日期'}}</view>
            </picker>
          </div>
        </div>
        <image class="btn-icon"  @click=" userDetail?.work_history.push({company, position, start_time, end_time }); end_time = ''; start_time = '';position = '';company = '';"></image>
      </div>
    </div>


    <div class="push-item">
      <BInput label="联系方式" v-model="userDetail.tel">
        <template v-slot:next>
          <image class="ipt-icon" src=""></image>
        </template>
      </BInput>
      <BInput v-model="userDetail.wx_num">
        <template v-slot:next>
          <image class="ipt-icon" src=""></image>
        </template>
      </BInput>
    </div>

    <div class="flex align-center justify-center btns">
      <div class="btn">取消</div>
      <div class="btn push" @click="bindSubmit">发布</div>
    </div>
  </div>

  <BTab></BTab>
</template>

<script lang="ts" setup>
import BTab from "../../components/BTab";
import BInput from "../../components/from/BInput.vue";
import {onMounted, ref, toRaw} from "vue";
import BPrices from "../../components/from/BPrices.vue";
import {editProfile_data, user_data} from "../../api/user";

const userDetail = ref({
  tags: ['12312312'],
  edu_history: [
  ],
  work_history: [
  ]
})
onMounted(() => {
  user_data().then(res => {
    userDetail.value = {
      ...res.resume,
      ...res,
      tags: res.tags ? res.tags.split(',') : [],
      // edu_history: JSON.parse(res.edu_history || '{}'),
      // work_history: JSON.parse(res.work_history || '{}')
    }
  })
})

const tagsValue = ref('');
const college = ref('');
const degree = ref('');

const company = ref('');
const position = ref('');
const start_time = ref('');
const end_time = ref('');


const bindSubmit = () => {

  const user = toRaw(userDetail.value)
  user.tags = user.tags?.join(',')
  user.edu_history = JSON.stringify(user.edu_history)
  user.work_history = JSON.stringify(user.work_history)

  editProfile_data(user)
}
</script>

<style scoped lang="scss">
  image {
    background: red;
  }

  .page {
    padding: 32rpx;
    .label {
      font-size: 30rpx;
      font-weight: 500;
      color: #0D3333;
      line-height: 42rpx;
    }
  }
  .user {
    padding: 48rpx 0 10rpx ;
    .user-detail {
      padding: 32rpx 0;
      .user-icon {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
      }

      .edit {
        width: 144rpx;
        height: 64rpx;
        background: #0D3333;
        border-radius: 24rpx;
        font-size: 28rpx;
        font-weight: 500;
        color: #FFFCF2;
        line-height: 64rpx;
        text-align: center;
        margin: 0 32rpx;
      }
    }
  }

  .push-item {
    margin-top: 16rpx;
    .ipt-icon {
      width: 44rpx;
      height: 44rpx;
      background: #24FAF6;
    }
  }

  .two-input {
    padding: 32rpx 0 0;
    .label {
      padding: 0 22rpx;
    }
    .ipt {
     flex: 1;
      background: #FFFFFF;
      border-radius: 24rpx;
      border: 2rpx solid rgba(0,0,0,0.08);
      margin: 16rpx 0;
      input, picker {
        width: 50%;
        height: 72rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: #0D3333;
        padding: 0 38rpx;
        line-height: 72rpx;
      }
      .uni-input {
        margin:  0  0 0 -20rpx;
      }
      .border {
        width: 2rpx;
        height: 32rpx;
        background: rgba(0, 0, 0, 0.08);
        border-radius: 24rpx;
      }
    }
    .btn-icon {
      width: 64rpx;
      height: 64rpx;
      border-radius: 24rpx;
      margin-left: 24rpx;
    }
  }

  .two-input.work2 {
    .ipt {
      border: 2rpx solid rgba(0,0,0,0.08);
      .ipt-item {
        margin: 0 32rpx;
        input {
          padding: 0 20rpx;
        }
        &:first-child {
          border: none;
        }
        border-top: 2rpx solid rgba(0,0,0,0.08) ;
      }
    }
    height: 72rpx;
  }

  .grid {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 40rpx;
    padding: 0  40rpx 0 0;
  }


  .btns {
    gap: 60rpx;
    padding: 32rpx 0 ;
    .btn {
      width: 192rpx;
      height: 64rpx;
      background: rgba(13, 51, 51, 0.08);
      border-radius: 20rpx;
      font-size: 28rpx;
      font-weight: 500;
      line-height: 64rpx;
      text-align: center;
      color: #0D3333;;
      &.push {
        color: #000000;
        background: var(--main)
      }
    }
  }


</style>
